<template>
  <div class="flex flex-col relative" style="height:auto;">
    <div style="height:50px;width:100%;z-index:1;">
      <Xheader class="fixed top-0 w-full"></Xheader>
    </div>
    <div class="flex-1" style="display: block;">
      <div class="flex">
        <div style="min-height:calc(100vh - 100px);background:#131824">
          <Xmenus :fold="fold"></Xmenus>
        </div>
        <div class="flex-1">
          <div class="flex flex-col">
            <hd-history @updatefold="update"></hd-history>
            <div class="flex-1">
              <div style="padding: 2px 20px 2px 20px;">
                <router-view/>
              </div>
            </div>
            <el-backtop :bottom="50">
            </el-backtop>
          </div>
        </div>
      </div>
    </div>
    <div
        class="text-center bg-opacity-90 bg-gray-900 text-gray-200 flex items-center justify-center text-md font-sans "
        style="height:50px">
      XiaoHongPao 餐饮管理系统 ©{{ date }} All Rights
    </div>
  </div>
</template>

<script>
import Xheader from './components/header.vue'
import Xmenus from './components/menus.vue'

export default {
  route: {meta: {auth: true}},
  components: {Xheader, Xmenus},
  data() {
    return {
      date: '',
      fold: false
    }
  },
  created() {
    this.date = new Date().getFullYear()
    //获取当前用户权限，放到layout的目的是只在layout下调用一次，然后混入到原型里面
    this.$hd.init()
  },
  methods: {
    update(toggle) {
      this.fold = toggle
    }
  }

}
</script>

<style scoped>

</style>
